

<template>
  <div class="login-container">
		
	  <uni-popup ref="message" type="message" class="login-message">
	  		<uni-popup-message :type="msgType" :message="messageText" :duration="1000" border-radius="100px"  class="login-message"></uni-popup-message>
	  </uni-popup>
	  
      <div class="text">注册</div>

	  
	  <uni-forms ref="loginForm" :modelValue="ruleForm"  label-width="0">
	  	<uni-forms-item label=""   style="margin:2vh 5vw;">
	  		<input class="login-input" v-model="ruleForm.uname" placeholder="请输入用户名" />
	  	</uni-forms-item>
	  	<uni-forms-item label=""  style="margin:2vh 5vw;;"  >
	  		<input class="login-input"  type="password" v-model="ruleForm.password" placeholder="请输入密码(密码长度为6-20)" />
	  	</uni-forms-item>
		<uni-forms-item label=""  style="margin:2vh 5vw;;"  >
			<input class="login-input"  type="password" v-model="ruleForm.password2" placeholder="确认密码" />
		</uni-forms-item>
	  </uni-forms>
	  
      <div class="btnGroup">
		<div style="margin:10vh 5vw 0 30vw;color: white;width:50vw;font-size: 30rpx;" class="login-tips" @click="goRegister()"  >已有帐号？点此返回</div>
		
		<image  @click="submitForm('loginForm')" src="../../static/chishenme/login-removebg-preview.png" mode=""></image>
		
      </div>
	  

  </div>
</template>

<script>


export default {
	components:{

	},
  data() {
    return {
	  	type: 'center',
	  	msgType: 'success',
	  	messageText: '这是一条成功提示',
      ruleForm: {
        uname: "",
        password: "",
		password2: "",
      },
    };
  },
  methods: {
	  onLoad() {
		const userInfo = uni.getStorageSync('userInfo');
		if(userInfo){
			uni.switchTab({
				url:'../index/index'
			})
		}
	  },
    submitForm(formName) {
	
        const formData = {
          userName: this.ruleForm.uname,
          password: this.ruleForm.password2,
        };
		if(formData.userName==='' || formData.password===''){
			this.popMessage("error","请输入用户名和密码");
			return;
		}
		if (formData.password.length < 6 || formData.password.length > 20) {
		  this.popMessage("error", "密码长度为6-20");
		  return;
		}
		if(this.ruleForm.password != this.ruleForm.password2){
			this.popMessage("error", "密码不一致");
			return;
		}
        // 发送注册请求
		
		uni.showLoading({
			
		})
		
		
		uni.request({
		  url: 'http://localhost:8080/user/register',
		  method: 'POST',
		  data: formData,
		})
		  .then(response => {
			// 注册请求成功的处理逻辑
			console.log(response.data);
			this.popMessage("success", "注册成功");
			setTimeout(() => {
			  this.goBack();
			}, 1000);
		  })
		  .catch(error => {
			// 注册请求失败的处理逻辑
			console.error(error);
			this.popMessage("error", "注册失败");
		  })
		  .finally(() => {
			uni.hideLoading();
		  });
		
			

    },
	goRegister(){
		uni.navigateTo({
			url:'../login/login'
		})
	},
	popMessage(type,text){
		this.msgType = type
		this.messageText = text
		this.$refs.message.open()
	},
	goBack() {
	 uni.navigateBack({
	   delta: 1
	 });
	},
  },
};
</script>

<style lang="scss" >
	.login-container{
		 background: linear-gradient(to bottom, #F9988F, #DDE97A);
		 height: 100vh;
	}
	
	  .text{
		  color:white;
		  font-size: 6vh;
		  padding-top:40% ;
		  margin-bottom: 5vh;
		  margin-left: 5vw;
		  font-weight: 600;
	  }
	  .login-from {
	    margin: auto auto;
		font-weight: bold;
		font-size: 2vh;
	  }
	  .btnGroup{
		  display: flex;
		  justify-content: space-between;
		  margin-right: 3vw;
		  image{
			  height: 25vw;
			  width: 33vw;
		  }
	  }

	.login-message{
		border-radius: 30px;
		margin: 3vh 3vw 0 3vw ;
		overflow: hidden;
	}
	.login-input{
		border-radius: 50px;
		border: 2px solid #E5E5E5;
		height: 5vh;
		box-sizing: border-box;
		text-align: left;
		padding-left: 3vw;	
	}
/* 	.login-input::placeholder {
	  color: white;
	  opacity: 1;
	} */
</style>